<script>
export default {
  name: 'SelfHeader',
  data() {
    return {
      info: null
    }
  },
  mounted() {
    fetch('/info.json')
      .then(res => res.json())
      .then(data => {
        console.log('info.json 加载成功：', data)
        this.info = data;
      })
      .catch(err => {
        console.error('读取 info.json 失败：', err);
      });
  }
}
</script>
<template>
    <div class="header content"><span class="bold">自我介绍</span>
    </div>
    <p id="section1" class="italic"><span class="blockquote">没有十全十美的文章，正如没有彻头彻尾的绝望.</span></p>
    <div  v-if="info" class="pure-u-1 content">
        <div class="about pure-g">
            <div class="avatar pure-u-md-1-2">
                <div>
                    <img src="/images/selfie.jpg" class="circle-image" width="120" height="120" />
                </div>
                <div>
                    <span class="name">
                        <span class="highlight">Hello</span>
                        World!<br>
                        我的名字是
                        <span class="highlight">{{info.name}}</span><br>
                        {{info.age}}岁，{{ info.gender}}，{{ info.city }}人<br>
                    </span>
                </div>
            </div>
            <div class="info pure-u-md-1-2">
                {{ info.title }}<br>
                <span class="highlight">{{ info.university }}{{ info.college }} {{ info.major }}专业</span><a href="http://www.som.zju.edu.cn/" target="_blank">{{ info.college }}官网</a><br>
                <a href="https://www.bilibili.com/video/BV1QuURYKE2L/?spm_id_from=333.337.search-card.all.click&vd_source=ae8cee8b0e324c05dc1b4f8e825adde7" class="highlight">“东方开物谭~Theory of Fulfilled Mind”</a>系列活动主策划<br>
            </div>
        </div>
    </div>
    <div v-if="info" class="white-background pure-u-1">
        <div class="content white-background">
		    主要活跃在{{info.habitat}}<br>
            平时空闲时间喜欢<span class="highlight">{{info.hobby}}</span><br>
            目前正在{{ info.situation }}<br>
            可以通过上方导航栏跳转到不同的部分！
        </div>
    </div>
</template>

<style>
.blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    unicode-bidi: isolate;
}
  .header {
    align-items: center;
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0.5em;
    padding: 10px 0;
    font-family:sans-serif;
    color: #000;
    font-size: 200%;
  }
  .header .links {
    align-items: center;
    font-size: 1.1rem;
    flex: auto;
  } 
  .header .links .nav {
    width: 100%;
    top: 0px;
    z-index: 99;
    position: fixed;
    background-color: #f1f3f4;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    filter: drop-shadow(5px 5px 10px grey);
  } 
  .about {
    padding: 0 20px;
    display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}
.about .avatar div {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}
.about .avatar div .name {
    box-sizing: border-box;
}
.about .info {
    text-align: right;
}
.pure-g {
    letter-spacing: 0.00938em !important;
}
.pure-u-1 {
    width: 100%;
}
.pure-u-md-1-2 {
    width: 50%;
}
.highlight {
    color:#770e1c;
    font-weight: bold;
    font-style: normal;
}
.italic {
    font-style: italic;
}
.content {
    margin: 10px auto;
    padding: 0 20px;
    max-width: calc(max(1600px, 51%));
    text-align: left;
}
.white-background {
    background-color: #fff;
}
/* 简单给导航栏一点样式 */
.navbar {
  background-color: #f8f9fa;
  padding: 10px 20px;
}
.navbar a {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
}
.navbar a.router-link-active {
  font-weight: bold;
  color: #42b983;
}
</style>